<template>
  <div @click="toggleClick">
    <el-button circle class="hamburger-button" :class="{'hamburger-button-is-active': isActive}"
               :icon="isActive?DArrowLeft:DArrowRight" size="small">
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';


defineProps({
  isActive: propTypes.bool.def(false)
});

const emit = defineEmits(['toggleClick']);
const toggleClick = () => {
  emit('toggleClick');
};
</script>

<style scoped>
.hamburger-button {
  position: fixed;
  left: 67px;
  top: 12px;
  z-index: 8888;
  transition: left 0.28s;
}

.hamburger-button-is-active {
  left: 187px;
}
</style>
